<template>
  <!-- <a-modal v-model:visible="show" title="上传文件" :maskClosable="false">
    <a-spin :spinning="loading">
      <a-space style="width: 100%" :size="25" direction="vertical">
        <div class="operation-box">
          <div class="operation-item">
            <div style="width: 100%">
              <a-upload-dragger v-if="!disabled" :showUploadList="false" style="width: 100%" :disabled="loading" accept=".xls,.xlsx" :customRequest="handleCustomRequest" :beforeUpload="handleBeforeUpload" @drop="handleDrop">

                <div class="box-upload">
                  <span>{{ resultData ? "重新上传" : "选择上传文件" }}</span>
                </div>
              </a-upload-dragger>
            </div>
          </div>
          <div class="operation-item" @click="downTemplate">下载模板</div>
        </div>
        <div v-if="resultData">
          <div>
            成功条数：{{ resultData.successResult }}
          </div>
          <div>
            失败条数：{{ resultData.errorResult }}
          </div>
          <div style="display:flex;flex-wrap:wrap" v-if="resultData.errorResult">
            <span style="flex:none">失败文件链接:</span><a download :href=" resultData.errorUrl">{{ resultData.errorUrl }}</a>
          </div>
        </div>

        <a-table style="height: 300px; overflow: auto" :pagination="false" v-if="errorMsg?.length" :dataSource="errorMsg" :columns="columns" />
      </a-space>
    </a-spin>

  </a-modal> -->

  <a-modal v-model:visible="show" title="上传文件" :maskClosable="false" :footer="null">

    <div>
      <div class="card-body">
        <div class="card-box">
          <p>1、下载模板</p>
          <p>下载导入模板，填写信息</p>
          <br />
          <a-button type="primary" class="btn" @click="downTemplate">下载模板</a-button>
        </div>
        <div class="card-box" style="    display: flex;flex-direction: column;">
          <p>2、上传文件</p>
          <p>上传按模板填写的文件、仅支持xls、xlsx格式文件</p>
          <!-- <a-button v-if="!isSuccess">上传文件</a-button> -->

          <!-- <a-upload
            v-model:file-list="fileList"
          accept=".xls,.xlsx" 
            list-type="text"
            :show-upload-list="false"
            :before-upload="beforeUpload"
            :custom-request="customRequest"
          >
            <a-button type="primary" class="btn">导入</a-button>
          </a-upload> -->

          <a-upload-dragger v-if="!disabled" :showUploadList="false" style="width: 100%" :disabled="loading" accept=".xls,.xlsx" :customRequest="handleCustomRequest" :beforeUpload="handleBeforeUpload" @drop="handleDrop">
            <!-- <p class="ant-upload-drag-icon">
                <inbox-outlined></inbox-outlined>
              </p> -->
            <!-- <p class="ant-upload-text">选择上传文件</p> -->
            <!-- <a-spin class="fileSpin" v-if="loading" /> -->
            <!-- <div class="box-upload">
              <span> 导入文件 </span>
            </div> -->
            <a-button type="primary" class="btn">导入文件</a-button>
          </a-upload-dragger>

        </div>
      </div>
      <div v-if="resultData" style="margin-top: 15px;">
        <div>
          成功条数：{{ resultData.successResult }}
        </div>
        <div>
          失败条数：{{ resultData.errorResult }}
        </div>
        <div style="display:flex;flex-wrap:wrap" v-if="resultData.errorResult">
          <span style="flex:none">失败文件链接: </span><a download :href=" resultData.errorUrl"> 去下载</a>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { postGameImportData, postGameDownTemplate } from "@/api/common";
// import { getUploadFile } from "@/axios/index";
// import { saveExcelData } from "@/api/index";
import { message } from "ant-design-vue";
import { AxiosCanceler } from "@/axios/axiosCancel";

const axiosCanceler = new AxiosCanceler();
const show = ref(false);

const fileList = ref([]);
const fileMsg = ref({});
const errorMsg = ref([]);
const columns = [
  {
    title: "行数",
    dataIndex: "row",
    key: "row",
  },
  {
    title: "消息",
    dataIndex: "message",
    key: "message",
  },
];

const handleBeforeUpload = async (file) => {
  const fileType = file.type;
  const validFileTypes = [
    "application/vnd.ms-excel",
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  ];

  if (!validFileTypes.includes(fileType)) {
    message.error("只允许上传 Excel 文件");
    return false;
  } else if (file.size > 100 * 1024 * 1024) {
    console.log("file", file);
    message.error("上传文件大小不能超过100MB");
    return false;
  }

  return true;
};
const loading = ref(false);
const resultData = ref(null)
function handleCustomRequest(options) {
  loading.value = true;
  const formData = new FormData();
  formData.append("file", options.file);
  console.log("fileList.value", fileList.value);

  postGameImportData(formData, {

  })
    .then((res) => {
      console.log('res', res.data);
      resultData.value = res.data;
      // fileMsg.value = Object.assign({}, resultData);
      loading.value = false;

    })
    .catch((err) => {
      console.log("err", err);
      // let currentIndex = fileList.value.findIndex((item)=>{
      //   return item.uid == options.file.uid;
      // });
      // fileList.value.splice(currentIndex, 1);
      loading.value = false;
      options.onError();
    });

  //   getUploadFile(formData, "/api/file/upload")
  //     .then((res) => {
  //       console.log("res--", res);
  //       setTimeout(() => {
  //         fileMsg.value = res.file;
  //         loading.value = false;
  //       }, 1000);
  //     })
  //     .catch((err) => {
  //       // loading.value = false;
  //       setTimeout(() => {
  //         loading.value = false;
  //         message.error("文件上传失败");
  //       }, 1000);
  //     });
}

function downTemplate() {
  postGameDownTemplate().then((res) => {
    console.log("下载模版");
    console.log("res", res);
  });
}

function handleOk() {
  handleCancel()
}
function handleCancel() {
  axiosCanceler.removePending({ url: "/sys/game/v1/import/data" });
  loading.value = false;
  fileMsg.value = resultData;
  show.value = false;
  console.log("取消上传");
}

function handleDrop() { }

defineExpose({
  show
})
</script>
<style lang="less" scoped>
// .operation-box {
//   display: flex;
//   gap: 20px;
//   margin: 25px 0 0;
//   .operation-item {
//     flex: 1;
//     border: 1px solid #ccc;
//     border-radius: 8px;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     cursor: pointer;
//   }
//   .fileSpin {
//     display: flex;
//     align-items: center;
//     justify-content: center;
//   }
// }
.footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 25px;
}

.company {
  color: rgb(45, 131, 250);
}
.department-box {
  margin-bottom: 20px;
}
.card-body {
  display: flex;
  justify-content: space-between;
}
.card-box {
  margin-left: 40px;
  width: 50%;
  // height: 400px;
  p {
    margin-bottom: 15px;
  }
  .file-box {
    margin-top: 15px;
    border: 1px solid #d9d9d9;
    padding: 2px 15px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.btn {
  background-color: #fff;
  color: rgb(45, 131, 250);
}

:deep(.ant-upload.ant-upload-drag) {
  width: max-content !important;
  border: none;
  padding: 0;
 .ant-upload-btn {
    padding: 0;
  }
}
</style>
